<template>
	<view class="page">
		<!-- 商品名称  -->
		<image style="width: 100%;" src="http://img06.jiuxian.com/2024/0111/17a8113edc3c46cf91261b1c29e574135.jpg"
			mode=""></image>
		<view style="padding: 5px;width: 91%;">
			<view class="product-name">{{ wineInfo && wineInfo.wname }}</view>
			<!-- 星级评分 -->

			<view class="rating flex-container flex-center">
				<text>评分:</text>
				<image v-for="(star, index) in 5" :key="index" :src="getStarImage(index)" @click="rateProduct(index)" />
			</view>

			<!-- 评论输入框 -->
			<view class="comment">
				<textarea v-model="comment" placeholder="请输入您的评价" maxlength="200"></textarea>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitReview">提交评价</view>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				productName: "商品名称",
				orderInfo: [],
				rating: 0, // 默认评分为0，表示未评分
				comment: "", // 评论内容,
				userId: 0,
				reviewId: 0
			};
		},
		created() {
			const {
				uid
			} = uni.getStorageSync('uid');

			// Assign uid to userId
			this.userId = uid;
			console.log(this.userId);

			this.getDetail()
		},
		onLoad(val) {
			this.oderId = Number(val.id)
		},
		computed: {
			wineInfo() {
				// 解构出 wine 对象
				const {
					wine
				} = this.orderInfo;
				return wine;
			}
		},
		methods: {
			// 选择星级评分
			rateProduct(starIndex) {
				this.rating = starIndex;
			},
			// 获取星星图标
			getStarImage(starIndex) {
				return starIndex <= this.rating ? require("@/static/my/p1/astar.png") : require(
					"@/static/my/p1/nstar.png");
			},

			// 提交评价
			async submitReview() {
				// 在这里处理提交评价的逻辑，可以将评价内容发送给后端服务器
				console.log("商品名称：", this.productName);
				console.log("评分：", this.rating);
				console.log("评论内容：", this.comment);
				// 清空评论内容

				// 提交成功后，可以给出提示或跳转页面等操作
				const param = {
					oderId: this.oderId,
					userId: this.userId,
					comment: this.comment,
					rating: this.rating
				}
				const res = await this.$request.post('/system/logistics-reviews/add', param)
			
				if (res.code === 200) {
					let that = this
					this.confirmEvaluate()
					that.$refs.uToast.show({
						type: 'success',
						title: '成功主题(带图标)',
						message: res.message,
						complete: (da) => {
							// uToast消失后执行页面跳转
							uni.navigateBack({
								delta: 1, // 返回上一页
								success() {
									// 返回成功后触发事件
									uni.$emit('refreshOrderList');
								}
							});
						}
					})
					this.comment = "";

				} else {
					this.$refs.uToast.show({
						type: 'error',
						title: '失败主题',
						message: res.message,
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					});
				}
			},
			async confirmEvaluate() {

				// 处理确认收货逻辑
				const param = {
					id: this.oderId
				}
				const res = await this.$request.post('/system/logistics-order/evaluate', param)
				// if(res.code==200){
				// 	uni.navigateTo()
				// }

			},
			async getDetail() {
				const param = {
					id: this.oderId
				}
				const res = await this.$request.get('/system/logistics-order/loOByKey', param)
				console.log(res);
				if (res.code === 200) {

					this.orderInfo = res.data.w
					console.log(this.orderInfo);

				} else {

				}
			},
		}
	};
</script>

<style scoped>
	.page {
		background-color: #fff;
	}

	.product-name {
		font-size: 16px;
		margin-bottom: 10px;
		font-family: 'Arial', sans-serif;
		/* 替换为您喜欢的字体 */
		font-size: 24px;
		/* 调整字体大小 */
		color: #333;
		/* 字体颜色 */

	}

	.rating {
		margin-bottom: 20px;
	}

	.rating image {
		width: 30px;
		height: 30px;
	}

	.comment textarea {
		width: 100%;
		height: 100px;
		border: 1px solid #ccc;
		padding: 10px;
		resize: none;
	}

	.submit-btn {
		width: 85%;
		background-color: #007bff;
		color: #fff;
		margin: 0 auto;
		margin-top: 1rem;
		text-align: center;
		padding: 10px 0;
		border-radius: 5px;
		cursor: pointer;
	}
</style>